<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <!-- <div>
      对于大量图片的网站，图片延迟加载是提高速度和性能的好方法。
      目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。大体常用的就这两种。
      这里介绍第一种方法，根据滚动条手动加载图片，最初采用的是LazyLoad.js这个现成的小插件，当然自己用jquery自己写也是很简单的。
    </div>
    <div>
      图片懒加载的好处
      1.首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获取加载，如果图片数量较大，对于用户来说简直就是灾难，会出现卡顿现象，影响用户体验。
      2.有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
      图片懒加载的实现原理
      页面在浏览器中打开，img标签的src属性会自动请求其图片地址，实现懒加载我们先要使用自定义属性(例:data-src)来避免img的自动加载，也相当于把图片地址存储在当前标签里。然后js监听父元素scroll事件，当此图片出现在可视区域后，js把自定义src设置为图片src。
    </div>
    <div>给每一个img添加默认加载图片,添加一个自定义属性占个位</div> -->
    <img src="./img/loading.gif" data-src="./img/01.jpg" alt="" />
    <img src="./img/loading.gif" data-src="./img/02.jpg" alt="" />
    <img src="./img/loading.gif" data-src="./img/03.jpg" alt="" />
    <img src="./img/loading.gif" data-src="./img/04.jpg" alt="" />
    <img src="./img/loading.gif" data-src="./img/05.jpg" alt="" />
  </body>
  <!-- 导入jq组件 -->
  <script src="./jq.js"></script>
  <script src="./lazyLoad.js"></script>
  <script>
    // 执行lazyLoad函数
    $("img").lazyLoad();
    // 刷新将文档调整为距离最顶部为0
    document.documentElement.scrollTop = 0;
  </script>
</html>
